<style>
.login-code-input {
    width: 60%!important;
}

.btn {
    width: 100px;
    height: 50px;
    background: #44af00;
}

#main {
    height: 500px;
    width: 1000px;
}
</style>
<template>
    <div>
        <div id="main"></div>
       
    </div>
</template>
<script>
var echarts = require('echarts');
var china = require('../libs/china.js')
var date = require('../libs/date.js');
export default {
    data() {
        return {
            msg: 123,
            datalist: {}
        }
    },
    mounted:function(){
    	this.clickfn()
    },
    methods: {
        province: function(arr) {
            for (var i = 0; i < arr.length; i++) {

                var str = arr[i].name;
                var reg = new RegExp("省", "g");
                var a = str.replace(reg, "");
                arr[i].name = a
            }
            return arr;
        },
        clickfn: function() {
            var that = this
            that.$http.get('/access_token').then(function(response) {
                var access_token = JSON.parse(response.data).access_token
                console.log(access_token);
                that.datafn(1, access_token, date.yesterday(),function(){
            	that.datafn(7, access_token, date.sevenDays(),function(){
            		that.datafn(30, access_token, date.thirtyDays(),function(){
            			 that.draw()
            		})
            	})
            })
                }).catch(function(response) {
                    console.log(response);
                });
            
            
            
            
           
        },
        datafn: function(daysum,access_token,date,cb) {

        	var that=this;
            that.$http.post('/datacube/getweanalysisappiduserportrait?access_token=' + access_token, date).then(function(response) {
                    var drawdata = that.province(response.data.visit_uv.province)
                    if (daysum == 1) {
                        that.$data.datalist.drawdata1 = drawdata
                    }
                    if (daysum == 7) {
                        that.$data.datalist.drawdata2 = drawdata
                    }
                    if (daysum == 30) {
                        that.$data.datalist.drawdata3 = drawdata
                    }
                    cb()
                })
                .catch(function(response) {
                    console.log(response);
                });



        },
        draw: function() {
            var that = this

            function randomData() {
                return Math.round(Math.random() * 1000);
            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '淘弃二手数据平台',
                    subtext: '孔睦科技',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['最近1天', '最近7天', '最近30天']
                },
                visualMap: {
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                        name: '最近1天',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: that.$data.datalist.drawdata1
                    },
                    {
                        name: '最近7天',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: that.$data.datalist.drawdata2
                    },
                    {
                        name: '最近30天',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: that.$data.datalist.drawdata3
                    }
                ]
            });
        }
    }
}
</script>